<template>
	<view class="taskAllocation_wrapper">
		<image src="https://renovationcdn.jiachuangnet.com/index/workerIndex/bg.png" class='bg'></image>
		<u-navbar title='开始作业' leftIconColor="#1E272E" :titleStyle="{fontWeight:700,fontSize:'32rpx',color:'#1E272E'}"
			bgColor="transparent" :auto-back="true"></u-navbar>
		<view class="wrapper">
			<view class="taskAllocation_msg" v-if="info">
				<view class="flex case_wrappper" style="justify-content: start;">
					<view class="case_item">
						<view class="flagship" v-if="info.taskState==1">
							进行中
						</view>
						<view class="flagship" v-if="info.taskState==3">
							已完成
						</view>
						<view class="flagship" v-if="info.taskState==2">
							已逾期
						</view>
						<image :src="info.storeImg.includes('http')?info.storeImg:'https://'+info.storeImg" mode="" class="case_img" v-if="info&&info.storeImg"></image>
						<image src="https://renovationcdn.jiachuangnet.com/details1/noPic.png" mode="" class="case_img" v-else></image>
					</view>
					<view class="taskMsg">
						<view class="taskTital" v-if="info.assignName">
							{{info.assignName}}
						</view>
						<view class="tag">
							<image src="https://renovationcdn.jiachuangnet.com/details1/zhuangxiu.png" mode=""
								style="width: 34rpx;height: 34rpx;padding-right: 19rpx;"></image>
							装修
						</view>
						<view class="timer" v-if="info.createTime">
							发布时间： {{info.createTime}}
						</view>
						<view class="allocation" v-if="info.taskName" style="margin-top: 30rpx;font-size: 30rpx;">
							{{info.taskName}}
						</view>
					</view>
				</view>
				<view class="taskForm">
					<view class="flex alignItem bewteen" v-if="info.createTime">
						<view class="label" style="width:200rpx">实际开工日期</view>
						<view class="val">
							{{info.startTime||"暂无"}}
						</view>
					</view>
					<view class="flex alignItem bewteen" v-if="info.address">
						<view class="label" style="width:auto;height: auto;flex-wrap: wrap">地址</view>
						<view class="val" style="padding-bottom: 28rpx;">
							{{info.address}}
						</view>
					</view>
					<view class="flex alignItem bewteen" v-if="info.endTime">
						<view class="label" style="width:200rpx">预计完工日期</view>
						<view class="val">
							{{info.endTime}}
						</view>
					</view>
					<view class="flex alignItem bewteen" v-if="info.allCount">
						<view class="label" style="width:auto">工期(天)</view>
						<view class="val">
							{{info.allCount}}
						</view>
					</view>
				</view>
			</view>
			<view class="uploadImage" v-if="info&&info.taskState!=3">
				<span style="color: #333333;font-weight: bold;">任务完成情况</span>
				<view class='flex alignItem bewteen'>
					<p style="font-size: 26rpx;">完成情况<span>*</span></p> <u--input placeholder="请输入内容" border="surround"
						v-model="finishStatus"></u--input>
				</view>
				<view class="flex alignItem bewteen" style="height: 180rpx;">
					<p style="font-size: 26rpx;">上传图片<span>*</span></p>
					<p style="margin-right: 20rpx;">
						<view class="taskImgOver">
							<upload name='5' @uploadFile="uploadFile" :fileListInit="finishImage" :previewImage="false"></upload>
						</view>
					</p>
				</view>
				<view class="" style="display: flex;flex-wrap: wrap;">
					<p v-for="(item,index) in elevations" :key="index"><span style="position: absolute;color: #333333;" @click="deleteI(index)">x</span><image :src="'http://'+item" mode="" class="taskImg" style="width: 120rpx;height: 120rpx;margin-right: 10rpx;" @click="finishImagePre(index)"></image></p>
					
				</view>
			</view>
			
			<view class="uploadImage" v-if="info&&info.taskState==3">
				<span style="color: #333333;font-weight: bold;">任务完成情况</span>
				<view class='flex alignItem bewteen'>
					<p style="font-size: 26rpx;">完成情况:</p> 
					<p>{{info.taskRemark}}</p>
				</view>
				<view class="flex alignItem bewteen" style="height: 180rpx;">
					<p style="font-size: 26rpx;">图片:</p>
					<view>
						<image v-for="(item,index) in info.taskImg" :key="index" :src="'http://'+item" mode="" class="taskImg" style="width: 120rpx;height: 120rpx;" @click="preImgList(index)"></image>
					</view>
						
				</view>
			</view>
			
			<view v-if="info&&info.taskState!=3" class="bottom" :style="{paddingBottom: bottom+'px'}"
				style="width:calc(650rpx);padding:0 50rpx;padding-top: 20rpx;">
				<u-button style="height: 88rpx;" color='#13989a' @click="submit">确认完成</u-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	import index from '../../uni_modules/uview-ui';
	import formItem from '../../uni_modules/uview-ui/libs/config/props/formItem';
	import list from '../../uni_modules/uview-ui/libs/config/props/list';

	let app = getApp();
	export default {
		data() {
			return {
				assignTaskId: 0,
				info: null,
				// color: app.globalData.defaultColor,
				bottom: app.globalData.safeBottom,
				currentTask: 0,
				finishStatus: "",
				previewImage: [],
				elevations: [],
				loginType: null,
				finishImage: [],
				taskAssignmentList: [],
				isCheck: false,
				taskStateList: [{
					name: '全部',
					badge: {
						value: 5,
					}
				}, {
					name: '待开始'
				}, {
					name: '进行中'
				}, {
					name: '待验收'
				}, {
					name: '已逾期'
				}]
			}
		},
		onLoad(option) {
			this.assignTaskId = option.distributionId;
			this.loginType = uni.getStorageSync('loginType')
			if (option.isCheck) {
				this.isCheck = option.isCheck
				let app = getApp();
				this.taskAssignmentList = app.globalData.taskAssignmentList
			}

		},
		onShow() {
			this.getTaskProgressVo()
		},
		methods: {
			// chooseImages(){
			// 	uni.chooseImage({
			// 		count: 9, //默认9
			// 		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// 		sourceType: ['album'], //从相册选择
			// 		success: function (res) {
			// 			console.log(res)
			// 			this.previewImage=res.tempFilePaths;
			// 		}
			// 	});
			// },
			preImgList(currentIndex){
						uni.previewImage({
							current:currentIndex,
							urls:this.info.taskImg.map(url=>'http://'+url),
							longPressActions: {
								itemList: ['保存图片'],
								success: data=> {
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
									uni.closePreviewImage()
									/* 保存图片到系统相册 */
									if(data.tapIndex==0){
										uni.getImageInfo({
													src:this.info.taskImg.map(url=>'http://'+url)[data.index],
													success: function(res) {
														console.log(res)
														uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
															filePath:res.path, //图片文件路径
															success: function() {
																uni.showToast({
																	title: '图片保存成功',
																	icon: 'none',
																});
															},
															fail: function(e) {
																console.log(e);
																uni.showToast({
																	title: '图片保存失败',
																	icon: 'none',
																});
															},
														});
													},
													fail: function(e) {
														console.log(e);
														uni.closePreviewImage()
														uni.showToast({
															title: '图片保存失败',
															icon: 'none',
														});
													},
												})
									}
															},
															fail: function(err) {
																console.log(err.errMsg);
															}
														}
						})
			},
			finishImagePre(currentIndex){
						uni.previewImage({
							current:currentIndex,
							urls:this.elevations.map(url=>'http://'+url),
							longPressActions: {
								itemList: ['保存图片'],
								success: data=> {
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
									uni.closePreviewImage()
									/* 保存图片到系统相册 */
									if(data.tapIndex==0){
										uni.getImageInfo({
													src:this.elevations.map(url=>'http://'+url)[data.index],
													success: function(res) {
														console.log(res)
														uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
															filePath:res.path, //图片文件路径
															success: function() {
																uni.showToast({
																	title: '图片保存成功',
																	icon: 'none',
																});
															},
															fail: function(e) {
																console.log(e);
																uni.showToast({
																	title: '图片保存失败',
																	icon: 'none',
																});
															},
														});
													},
													fail: function(e) {
														console.log(e);
														uni.closePreviewImage()
														uni.showToast({
															title: '图片保存失败',
															icon: 'none',
														});
													},
												})
									}
															},
															fail: function(err) {
																console.log(err.errMsg);
															}
														}
						})
			},
			uploadFile(msg) {
				this.elevations = msg.files
			},
			deleteI(i){
				this.elevations.splice(i, 1)
			},
			submit() {
				// let taskAssignmentList=JSON.parse(JSON.stringify(this.taskAssignmentList))
				// let listTemp=taskAssignmentList.filter(item=>{
				// 	if(item.taskList.length){
				// 		return item
				// 	}
				// })
				// let listTemp1=listTemp.map(item=>{
				// 		item.taskList=item.taskList.map(item2=>{
				// 			return {
				// 				completeUserId:item2.completeUserId,
				// 				taskId:Number(item2.taskId)
				// 			}
				// 		})
				// 		return item
				// 	})
				// uni.$u.http.post('/assign/addAllocatingTask', {
				// 	assignTaskId:this.assignTaskId,
				// 	list:listTemp1
				// }).then(res=>{
				// 	uni.$u.toast('分配保存成功 :)');
				// 	this.isCheck=false
				// 	this.taskAssignmentList=[]
				// 	this.getTaskProgressVo()
				// })

				const data = {
					img: this.elevations,
					remark: this.finishStatus,
					assignTaskDetailsId: this.info.assignTaskDetailsId,
					distributionId: this.info.distributionId
				}
				uni.$u.http.post('/assign/updateJobInfo', data).then(res => {
					if (res == 1) {
						uni.showToast({
							title: '提交成功',
							duration: 1000,
							mask:true,
							complete:()=>{
								setTimeout(()=>{
									uni.switchTab({
										url: '/pages/settled/index'
									})
								},1000)
							}
						});
					}
				})
			},

			getTaskProgressVo() {
				uni.$u.http.get('/assign/getJobInfo', {
					params: {
						state: this.assignTaskId,
					}
				}).then(res => {
					if (res) {
						const [datePart, timePart] = res.createTime.split(' ');
						if(res.taskImg&&res.taskImg.includes(',')){
							res.taskImg=res.taskImg.split(',')
						}else{
							res.taskImg=[res.taskImg]
						}
						this.info = res
					}

				})
			},
			changeTaskState(e) {
				console.log(e)
				// this.currentTask=index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.case_img{
		width: 226rpx;
		height: 261rpx;
		border-radius: 20rpx;
	}
	.wrapper{
		width: 700rpx;
		position: absolute;
		top: 100rpx;
		left: 25rpx;
		z-index: 10;
		// min-height: 100vh;
	}
	.bg {
		width: 750rpx;
		height: 560rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.taskForm {
		margin-top:30rpx;
		background-color: #FFFFFF;
		padding-left: 20rpx;
		border-radius: 20rpx;
	}

	.alignItem {
		height: 100rpx;
		// border-bottom: 2rpx solid #f2f2f2;
		margin-right: 30rpx;
		.val {
			text-align: start;
			overflow: visible !important;
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10000;
		width: 100%;
		padding: 20rpx 0;
		min-height: 20rpx;
	}

	.titleList {
		.titleList_item {
			justify-content: space-between;
			height: 88rpx;
			align-items: center;

			.text {
				color: #333333;
				font-weight: 650;
			}

			.taskList_wrapper {
				padding: 0 10rpx;

				.stateTag {
					position: absolute;
					top: 0;
					right: 0;
					line-height: 44rpx;
					padding: 0px 15rpx;
					border-radius: 12rpx;
					background-image: linear-gradient(90deg, #3dd4a7 0%, #00ffff 100%, #00ffff 100%);
					color: #ffffff;
					text-align: center;
				}

				.taskList_wrapper_item {
					position: relative;
					border-radius: 20rpx;
					padding: 15rpx 25rpx;
					background-color: rgba(242, 242, 242, 0.43);
					color: #13989a;
					margin-bottom: 50rpx;

					.day,
					.time {
						font-size: 30rpx;
						font-weight: 700;
						margin: 12rpx 20rpx;

					}

					::v-deep.content {
						font-weight: 650;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 10rpx 20rpx;

						.u-tag-wrapper {
							margin: 0 5rpx;
						}
					}
				}
			}
		}

	}

	.taskAllocation_wrapper {
		padding-top: 100rpx;
		margin-bottom: 20rpx;
		font-size: 24rpx;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		// background-color: #ffffff;

		.taskAllocation_msg {
			// margin: 30rpx;
		}
	}

	.case_wrappper {
		flex-wrap: wrap;
		padding-top: 65rpx;
		justify-content: space-between;
border-bottom-left-radius:20rpx;
		border-bottom-right-radius:20rpx;
		.case_item {
			position: relative;
			border-radius: 10rpx;
			margin-bottom: 22rpx;

			.case_img {
				width: 200rpx;
				height: 260rpx;
				border-radius: 10px;
			}
		}

		.taskMsg {
			padding-left: 28rpx;

			.taskTital {
				font-weight: 500;
				color: #000000;
				font-size: 33rpx;
				margin-bottom: 22rpx;
			}

			.tag {
				display:flex;
				align-items: center;
				width: 120rpx;
				padding: 4rpx 8rpx;
				border-radius: 8rpx;
				background-color: rgba(40, 208, 148, 0.1);
				box-sizing: border-box;
				color: #13989a;
			}

			.timer {
				margin-left: 6rpx;
				margin-top: 60rpx;
			}

			.allocation {
				color: #13989a;
			}
		}

		.flagship{
			width: 110rpx;
			line-height: 40rpx;
			background: #13989A;
			font-size: 22rpx;
			color: #FFFFFF;
			border-radius: (20rpx 0 20rpx 0 );
			text-align: center;
			position: absolute;
			top:0;
			left: 0;
			z-index: 1;
		}
	}

	.uploadImage {
		// margin:30rpx;
		margin-top: 30rpx;
		background-color: #FFFFFF;
		padding: 25rpx;
		border-radius: 20rpx;
		span {
			color: red;
		}

		.image{
			border-bottom: #13989a;
		}
	}
</style>